<!--  -->
<template>
  <div class='Enterprise album'>
    <div class="upload">
      <el-upload ref="upload" class="upload-demo" action :limit="10" :on-exceed="handleExceed" :http-request="postPic"
        :show-file-list="false" :file-list="fileList" list-type="picture" :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg,png,bmp文件，且不超过10M</div>
      </el-upload>
    </div>
    <div class="img">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(imgs,index) in fileList" class="bj" :key="index">
          <div class="grid-content" @mouseover="Mouseover(index)" @mouseleave="Mouseleave">
            <img :src="imgs.filePath" alt="">
            <span :class="imgStatus[imgs['auditStatus']][0]">{{imgStatus[imgs['auditStatus']][1]}}</span>
            <transition>
              <div class="bg-purple" v-show="index ==bjIndex">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(imgs)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemove(imgs, index)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </transition>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogVisible" center>
      <div class="imgStyle">
        <img :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postPicture, deletebyid } from '../../../../api/index';
export default {
  components: {},
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 图片list
      fileList: [],
      // 图片审核状态
      imgStatus: {
        1: ['reviewed', '待审核'],
        2: ['Approved', '审核通过'],
        3: ['AuditFailed', '审核未通过']
      },
      bjIndex: -1
    };
  },
  props: ['companyFileOutVoList'],
  watch: {
    companyFileOutVoList: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.fileList = newVal['companyFileOutVoList'] || []
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  methods: {
    // 鼠标进入
    Mouseover (index) {
      this.bjIndex = index
    },
    // 鼠标离开
    Mouseleave () {
      this.bjIndex = -1
    },
    // 删除
    handleRemove (file, index) {
      console.log(file, index);
      if (file.id) {
        let objForm = new FormData()
        objForm.append('id', file.id)
        deletebyid(objForm).then((res) => {
          if (res.success) {
            // 删除
            this.fileList.splice(index, 1)
            this.$message.success('删除成功')
          }
        })
      } else {
        this.fileList.splice(index, 1)
        this.$message.success('删除成功')
      }
    },
    // 预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.filePath;
      this.dialogVisible = true;
    },
    // 请求
    postPic (param) {
      let obj = {};
      obj.file = param.file;
      const isJPG = param.file.type == 'image/png' || param.file.type == 'image/jpg' || param.file.type == 'image/bmp' || param.file.type == 'image/jpeg';
      const isLt2M = param.file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是jpg/png/bmp格式!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
        return false
      }
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          obj.filePath = data.data.fileUrl;
          obj.auditStatus = 1
          console.log(data);
          this.fileList.push(obj);
          this.fileList.length > 10 ? (this.len = this.fileList.length) : null;
          let imgList = []
          this.fileList.map((item) => {
            if (!item.id) {
              imgList.push(item)
            }
          })
          this.$emit('fileListChange', imgList)
          console.log(this.fileList);
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    handleExceed () {
      this.$message.error('文件数量超出最大数量')
    },
    beforeUpload (file) {
      // const isJPG = file.type === 'image/jpeg';
      const isJPG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/bmp' || file.type == 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是jpg/png/bmp格式!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
        return false
      }
      return isJPG && isLt2M;
    }
  },
  created () {

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.upload-demo {
    margin-bottom: 30px;
}
.grid-content {
    width: 150px;
    height: 150px;
    margin-bottom: 40px;
    position: relative;
    border: 1px solid darkgray;
}
.bg-purple {
    width: 150px;
    height: 150px;
    top: 0;
    left: 0;
    position: absolute;
    /* box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5); */
    background-color: rgba(0, 0, 0, 0.3);
    transition: 3s;
}

.grid-content img {
    width: 100%;
    height: 100%;
}

.el-upload-list__item-actions {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -7px;
    margin-left: -10px;
}
.el-upload-list__item-delete {
    display: inline-block;
    color: rgba(0, 0, 0, 0.3);
    font-size: 32px;
    right: -50px;
}
.el-upload-list__item-preview {
    position: absolute;
    right: 0px;
    top: 0;
    color: rgba(0, 0, 0, 0.3);
    font-size: 32px;
}
.el-upload-list__item-delete:hover {
    color: #ffffff;
}
.el-upload-list__item-preview:hover {
    color: #ffffff;
}
.imgStyle {
    /* max-width: 600px; */
    /* max-height: 600px; */
}
.imgStyle img {
    width: 100%;
    height: 100%;
}
.AuditFailed {
    color: red;
    width: 100%;
    display: inline-block;
    text-align: center;
}
.Approved {
    color: #76c941;
    width: 100%;
    display: inline-block;
    text-align: center;
}
.reviewed {
    width: 100%;
    display: inline-block;
    text-align: center;
}

/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(10px);
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
    transition: all 0.1s ease;
}
</style>